<template>
  <div style="padding-top:46px">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="个人资料" fixed>
      <van-icon name="arrow-left" slot="left" color="#333" @click="back"/>
    </van-nav-bar>
    <!-- 内容 -->
    <div class="message_photo">
      <span>头像
        <img src="memberInfo.headPic" alt="">
      </span>
      <span>
        <span class="iconfont icon-yonghutouxiang "></span>
      </span>
    </div>
    <van-cell class="information_nickname" title="用户昵称" is-link :value="memberInfo.nickName" @click="goToNickName" />
    <van-cell title="性别" is-link :value="memberInfo.sex === 0 ? '男' : memberInfo.sex === 1 ? '女' : '未设置'" @click="showSex" />
    <van-cell title="生日" is-link :value="memberInfo.birthday" @click="showBirthday" />
    <!-- 底部生日弹出框 -->
    <div class="footer" v-if="birthdayPickShow">
      <van-datetime-picker
        v-model="birthday"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="pickBirthday"
        @cancel="showBirthday" />
    </div>
    <!-- 性别弹出框 -->
    <van-popup v-model="sexPickShow" position="bottom" :overlay="true">
      <div class="btn">
        <button class="btn1" @click="pickSex(0)">男</button>
        <button class="btn2" @click="pickSex(1)">女</button>
      </div>
      <div>
        <button class="btn3" @click="showSex">取消</button>
      </div>
    </van-popup>
  </div>
</template>
<script>
  import {
    selectBeeUser,
    updateBeeUserSex,
    updateBeeUser
  } from 'services/beeUser';
  import { setToastTimer } from 'framework/utils/utils';
  import { mapGetters } from 'vuex';

  export default {
    name: 'message',
    data() {
      return {
        birthdayPickShow: false,
        sexPickShow: false,
        minDate: new Date('1900-01-01'),
        maxDate: new Date(),
        birthday: new Date(),
        memberInfo: {}
      };
    },
    created() {
      this.fetchData();
    },
    computed: {
      ...mapGetters(['userInfo'])
    },
    methods: {
      fetchData() {
        const { userNo } = this.userInfo;
        selectBeeUser({ userNo }).then((response) => {
          this.memberInfo = response.object;
          this.birthday = new Date(this.memberInfo.birthday);
          this.sex = this.memberInfo.sex;
        }).catch((error) => {
          this.$toast({
              message: error.response.data.message,
              duration: 1000,
              forbidClick: true
            });
        });
      },
      back() {
        this.$router.go(-1);
      },
      goToNickName() {
        this.$router.push('/nickname');
      },
      showBirthday() {
        this.sexPickShow = false;
        this.birthdayPickShow = !this.birthdayPickShow;
      },
      showSex() {
        this.birthdayPickShow = false;
        this.sexPickShow = !this.sexPickShow;
      },
      pickSex(sex) {
        const { userNo } = this.userInfo;

        updateBeeUserSex({ userNo, sex }).then(() => {
          this.sexPickShow = false;

          this.$toast({
            message: '修改性别成功！',
            duration: 1000,
            forbidClick: true
          });

          // 弹窗结束重新获取数据
          setToastTimer(() => {
            this.fetchData();
            this.$store.dispatch('refreshUserInfo', this.userInfo);
          }, 1000);
        });
      },
      pickBirthday(value) {
        const { userNo } = this.userInfo;

        updateBeeUser({ userNo, birthday: this.$moment(value).format('YYYY-MM-DD') }).then(() => {
          this.birthdayPickShow = false;

          this.$toast({
            message: '修改生日成功！',
            duration: 1000,
            forbidClick: true
          });

          // 弹窗结束重新获取数据
          setToastTimer(() => {
            this.fetchData();
            this.$store.dispatch('refreshUserInfo', this.userInfo);
          }, 1000);
        });
      }
    }
  };
</script>
<style lang="less" scoped>
  .message_photo {
    height: 164px;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 30px;
    align-items: center;
    padding: 0 30px;
    background-color: #ffffff;
    .icon-yonghutouxiang {
      font-size: 120px;
      margin-left: 0px;
      color: #e3e3e3;
    }
    .icon-unie61f {
      font-size: 11px;
    }
  }

  .footer {
    width: 100%;
    height: 446px;
    position: fixed;
    bottom: 0px;
  }

  .van-popup {
    width: 640px;
    height: unset;
    bottom: 70px;
    border-radius: 30px;
    background: none;
    font-size: 36px;
    button {
      width: 100%;
      color: #4694ff;
      background: #fff;
      border: none;
    }
    .btn {
      margin-bottom: 30px;
      border-radius: 30px;
      height: 208px;
      width: 640px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .btn1 {
        height: 104px;
        border-bottom: 1px solid #f0f0f0;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
      }
      .btn2 {
        height: 104px;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
      }
    }
    .btn3 {
      border-radius: 15px;
      height: 108px;
    }
  }
</style>
